<template>
    <div class="app-container">
        <UserGroupFrom
            ref="userGroupFromRef"
            @fromQuery="fromQuery"
            @reset="reFresh"
        >
        </UserGroupFrom>

        <sysQueryutils
            @toolClick="toolClick"
            :btnList="btnList"
            @reFresh="reFresh"
            :loading="loading"
        ></sysQueryutils>

        <userGroupTable
            v-model:loading="loading"
            :tableData="tableData"
            @reFresh="reFresh(false)"
            @handleUserGRoupOpenDialog="handleUserGRoupOpenDialog"
        ></userGroupTable>

        <template v-if="pageInfo.total > 0">
            <div>
                <pagination
                    v-model:total="pageInfo.total"
                    v-model:page="pageInfo.page"
                    v-model:limit="pageInfo.limit"
                    @pagination="searchPagination"
                />
            </div>
        </template>

        <viewUserGroupDialog
            v-model="dialogViewUserVisible"
            :viewUserGroupRes="viewUserGroupRes"
        ></viewUserGroupDialog>

        <!-- 编辑和添加是一个    添加用户组-->
        <addUserGroupDialog
            v-model:modelValue="dialogAddUserGroupVisible"
            :userGroupDialogType="userGroupDialogType"
            :userGroupId="userGroupId"
            @reFresh="reFresh(false)"
        ></addUserGroupDialog>

        <!-- 查看用户组   人员 -->
        <viewGroupUserDialog
            v-model="dialogViewGroupUserVisible"
            :group_name="group_name"
            :vieGroupUserRes="vieGroupUserRes"
        >
        </viewGroupUserDialog>
        <addUserGroupUserDialog
            v-model="dialogEditGroupUserVisible"
            :editGroupsUserRes="editGroupsUserRes"
            :editGroupUserChoosed="editGroupUserChoosed"
            :group_id="userGroupId"
        ></addUserGroupUserDialog>
    </div>
</template>

<script setup lang="ts">
import { btnList } from "@/views/system/userGroupManager";
import UserGroupAPI from "@/api/system/userGroup";
import type { queryParams, btnObj } from "@/views/system/userGroupManager";

const userGroupFromRef = ref();
const loading = ref(false);

const userGroupDialogType: any = ref("添加");
const userGroupId: any = ref("");
const group_name: any = ref("");
/**
 *  添加 查看
 */
const dialogAddUserGroupVisible = ref(false);
const dialogViewUserVisible = ref(false);

const dialogViewGroupUserVisible = ref(false);
const dialogEditGroupUserVisible = ref(false);

// 查询参数
let pageInfo = reactive<queryParams>({
    page: 1,
    limit: 10,
    total: 0,
});

// 表格数据
let tableData = ref([] as any);

// 分页查询表单
async function searchPagination(value: any) {
    userGroupFromRef.value.querTableList();
}
// reFresh
async function reFresh(isReFresh: boolean = true) {
    if (isReFresh) {
        pageInfo.page = 1;
        pageInfo.limit = 10;
    }
    userGroupFromRef.value.querTableList();
}

// 查询表单
async function fromQuery(formObj: any) {
    let params = {
        page: pageInfo.page,
        limit: pageInfo.limit,
        ...formObj,
    };
    loading.value = true;
    await UserGroupAPI.getList(params)
        .then((res: any) => {
            tableData.value = res.data;
            pageInfo.page = res.current_page;
            pageInfo.total = res.total;
            pageInfo.limit = res.per_page;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 工具列表点击
async function toolClick(item: btnObj) {
    switch (item.name) {
        case "新增用户组":
            userGroupDialogType.value = "添加";
            dialogAddUserGroupVisible.value = true;
            break;
        default:
            break;
    }
}

/***
 * viewUserGroup 查看用户组 {id}    res: viewUserGroupRes
 * editUser 编辑用户组 {id}
 */
// table操作弹窗
function handleUserGRoupOpenDialog(rowInfo: any) {
    if (rowInfo.type === "查看") {
        viewUserGroup(rowInfo.item.row.id);
    }
    if (rowInfo.type === "编辑") {
        userGroupId.value = rowInfo.item.row.id;
        userGroupDialogType.value = "编辑";
        dialogAddUserGroupVisible.value = true;
    }
    if (rowInfo.type === "添加成员") {
        userGroupId.value = rowInfo.item.row.id;

        getEditGroupUserRes(rowInfo.item.row.id);
    }
    if (rowInfo.type === "查看组员") {
        group_name.value = rowInfo.item.row.name;
        userGroupId.value = rowInfo.item.row.id;
        viewGroupUserNumber(rowInfo.item.row.id);
    }
}

const vieGroupUserRes: any = ref([]);
// 查看用户组成员
async function viewGroupUserNumber(id: string) {
    loading.value = true;
    await UserGroupAPI.viewUserGroupUser({ group_id: id })
        .then((res: any) => {
            vieGroupUserRes.value = res.data;

            dialogViewGroupUserVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

const editGroupsUserRes: any = ref([]);
const editGroupUserChoosed: any = ref([]);
// 编辑新增  用户组成员
async function getEditGroupUserRes(id: string) {
    loading.value = true;
    let flag = true;
    await UserGroupAPI.getUserList({ group_id: id })
        .then((res: any) => {
            editGroupsUserRes.value = res;
        })
        .catch((err: any) => {
            console.log(err);
            flag = false;
        });

    await UserGroupAPI.getUserGroupChoosedUser({ group_id: id })
        .then((res: any) => {
            editGroupUserChoosed.value = res;
        })
        .catch((err: any) => {
            flag = false;
        });

    loading.value = false;
    dialogEditGroupUserVisible.value = flag;
}

let viewUserGroupRes = ref([] as any);
// 查看用户
async function viewUserGroup(id: string) {
    loading.value = true;
    await UserGroupAPI.viewUserGroup({ id })
        .then((res: any) => {
            viewUserGroupRes.value = res;
            dialogViewUserVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}
</script>

<style lang="scss" scoped>
.common_sty {
    padding: 0px 33px 27px 33px;
    background: #ecf0fe;
}
.app-container {
    @extend .common_sty;
    /* 57px = navbar = 57px */
    height: calc(100vh - 57px);
    overflow-y: scroll;
}

/** 开启tag标签  */
.hasTagsView {
    .app-container {
        @extend .common_sty;
        /* 84px = navbar + tags-view = 83px + 73px */
        height: calc(100vh - 141px);
        overflow-y: scroll;
        padding: 0px 33px 23px 33px;
    }
}
</style>
